<template>
    <div class="container">
        <div class="page-header">
            <h1>我的信息 <small>你的信息都在这里哦!</small></h1>
        </div>
        <div class="user-avatar">
            <img src="../assets/svg/undraw_male_avatar_323b.svg" height="256">
        </div>
        <div class="user-info">
            <div class="user-info-item">
                <h4>昵称</h4>
                <input type="text" class="form-control" v-model="user.name" readonly>
            </div>
            <div class="user-info-item">
                <h4>性别</h4>
                <div class="panel panel-default">
                    <div class="panel-body">
                        <div class="checkbox">
                            <label>
                                <input type="radio" name="gender" value="保密" checked="checked">
                                保密
                            </label>
                            <label>
                                <input type="radio" name="gender" value="男" v-model="user.gender">
                                男孩
                            </label>
                            <label>
                                <input type="radio" name="gender" value="女" v-model="user.gender">
                                女孩
                            </label>
                        </div>
                    </div>
                </div>
            </div>
            <div class="user-info-item">
                <h4>注册时间</h4>
                <div class="panel panel-default">
                    <div class="panel-body">
                        {{user.regTime|formatDate}}
                    </div>
                </div>
            </div>
            <div class="user-info-item">
                <h4>收货地址</h4>
                <input type="text" class="form-control" v-model="user.address" placeholder="请填写收获地址...">
            </div>
            <div class="user-info-item">
                <h4>我的优惠券</h4>
                <input type="text" class="form-control" v-model="discount" readonly>
                <!-- <input type="password" class="form-control" v-model="user.address" placeholder="请填写密码"> -->
                <!-- <input type="password" class="form-control" v-model="user.address" placeholder="请填写密码"> -->
            </div>
            <div class="user-info-item">
                <button type="button" class="btn btn-primary" @click="save">保存更改</button>
            </div>
        </div>
    </div>
</template>

<script>
import axios from "axios"
import { formatDate } from '../common/date'
export default {
    name:'info',
    data(){
        return{
            // user:{
            //     name:"",
            //     address:"",
            //     reg_time:"",
            //     gender:""
            // }
        }
    },
    computed:{
        user:{
            get:function(){
                return this.$store.state.user;
            },
            set:function(val){
                this.$store.commit('updateUserInfo',val)
            }
        },
        discount:{
            get:function(){
                console.log('this.$store.state.discount.length :>> ', this.$store.state.discount.length);
                if((this.$store.state.discount).length>0)
                return this.$store.state.discount;
                else return "暂无优惠券";
            },
        }
    },
    methods:{
        save(){
            console.log('warting :>> ', warting);
        }
    },
        filters:{
        formatDate(time){
            var date = new Date(time);
            return formatDate(date,'yyyy年MM月dd日 hh:mm:ss');
        }
    },
}
</script>

<style>
.user-avatar{
    margin: auto auto;
    float: left;
}

.user-info{
    width: 50%;
    margin-left: 50px;
    float: left;
}

.user-info .user-info-item{
    margin-bottom: 40px;
}

.user-info .user-info-item .checkbox{
    margin: 0px auto;
}
</style>
